regression: projects breadcrumb in accordion layout #8194
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new CommonProjectBreadcrumbs component that conditionally renders project-level breadcrumbs based on navigation preferences, integrates it into multiple header files across work items, projects, cycles, modules, pages, views, issues, and settings, and updates a small styling utility in the project breadcrumb component. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12–15 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR fixes a regression where project breadcrumbs were not visible in the accordion layout by introducing a new CommonProjectBreadcrumbs component that conditionally renders the project breadcrumb based on the navigation mode preference.
Key Changes:
- Created
CommonProjectBreadcrumbscomponent that shows project breadcrumbs only in accordion layout mode - Updated 13 header components across the application to use the new component
- Minor style update to use Tailwind's
size-4utility class inProjectBreadcrumbcomponent
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/ce/components/breadcrumbs/common.tsx | New component that conditionally renders project breadcrumb based on navigation mode (accordion vs horizontal) |
| apps/web/ce/components/breadcrumbs/project.tsx | Updated icon span to use size-4 utility class instead of separate h-4 w-4 |
| apps/web/ce/components/issues/header.tsx | Added CommonProjectBreadcrumbs to issues list header |
| apps/web/ce/components/projects/settings/intake/header.tsx | Added CommonProjectBreadcrumbs to project inbox header |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx | Added CommonProjectBreadcrumbs to project views list header |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx | Added CommonProjectBreadcrumbs to project view detail header, cleaned up comment organization |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx | Added CommonProjectBreadcrumbs to pages list header, extracted projectId from params |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx | Added CommonProjectBreadcrumbs to page detail header, cleaned up comment organization |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx | Added CommonProjectBreadcrumbs to modules list header |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx | Added CommonProjectBreadcrumbs to module detail header |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx | Added CommonProjectBreadcrumbs to cycles list header, extracted projectId from params, removed unused FC import |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx | Added CommonProjectBreadcrumbs to cycle detail header |
| apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx | Updated to use CommonProjectBreadcrumbs instead of ProjectBreadcrumb, cleaned up comment organization, removed unused FC import |
| apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx | Added CommonProjectBreadcrumbs to work item detail header |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx (1)
68-89: Archives breadcrumb composition is correct; minor whitespace nitThe breadcrumb sequence (project → Archives → active tab) reads well and uses the shared component correctly. The trailing
{" "}after<CommonProjectBreadcrumbs />is unnecessary; you can drop it to avoid a stray text node, but it’s purely cosmetic.apps/web/ce/components/breadcrumbs/common.tsx (1)
1-17: Guard CommonProjectBreadcrumbs against missing IDs to centralize loading-state handlingThe navigation-mode check here is a good place to also absorb the “projectId/workspaceSlug not ready yet” cases so individual headers don’t need bespoke guards.
To better protect against invalid URLs or regressions when IDs are empty/falsy, you can let this component no-op when either ID isn’t available and slightly relax the prop type:
-type TCommonProjectBreadcrumbProps = { - workspaceSlug: string; - projectId: string; -}; +type TCommonProjectBreadcrumbProps = { + workspaceSlug?: string; + projectId?: string; +}; export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) { const { workspaceSlug, projectId } = props; // preferences const { preferences: projectPreferences } = useProjectNavigationPreferences(); - if (projectPreferences.navigationMode === "horizontal") return null; - return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />; + if (projectPreferences.navigationMode === "horizontal") return null; + if (!workspaceSlug || !projectId) return null; + + return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />; }This keeps callers simple, avoids passing sentinel empty strings, and aligns with the prior guidance to handle loading states within the breadcrumb component itself.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx(3 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx(2 hunks)apps/web/ce/components/breadcrumbs/common.tsx(1 hunks)apps/web/ce/components/breadcrumbs/project.tsx(1 hunks)apps/web/ce/components/issues/header.tsx(2 hunks)apps/web/ce/components/projects/settings/intake/header.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/ce/components/breadcrumbs/common.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsxapps/web/ce/components/issues/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsxapps/web/ce/components/projects/settings/intake/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: prateekshourya29
Repo: makeplane/plane PR: 7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
📚 Learning: 2025-06-18T09:46:08.566Z
Learnt from: prateekshourya29
Repo: makeplane/plane PR: 7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsxapps/web/ce/components/breadcrumbs/common.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsxapps/web/ce/components/issues/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsxapps/web/ce/components/projects/settings/intake/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsxapps/web/ce/components/projects/settings/intake/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-05-14T13:16:23.323Z
Learnt from: vamsikrishnamathala
Repo: makeplane/plane PR: 7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsxapps/web/ce/components/projects/settings/intake/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
Repo: makeplane/plane PR: 7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsxapps/web/ce/components/projects/settings/intake/header.tsxapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
📚 Learning: 2025-11-25T10:18:05.172Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Applies to **/*.{ts,tsx,mts,cts} : Use `with { type: "json" }` for import attributes; avoid deprecated `assert` syntax (TypeScript 5.3/5.8+)
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
🧬 Code graph analysis (9)
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/ce/components/breadcrumbs/common.tsx (3)
apps/web/core/hooks/use-navigation-preferences.ts (1)
useProjectNavigationPreferences(107-155)apps/web/ce/components/breadcrumbs/project.tsx (1)
ProjectBreadcrumb(19-80)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/ce/components/issues/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx (3)
apps/web/core/hooks/use-app-router.tsx (1)
useAppRouter(4-4)apps/space/app/compat/next/navigation.ts (1)
useParams(34-36)apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/ce/components/projects/settings/intake/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (19)
apps/web/ce/components/breadcrumbs/project.tsx (1)
51-55: Breadcrumb icon size change looks correctSwitching to
size-4keeps the visual size while simplifying the Tailwind classes and remains compatible with the existing Logo usage. No functional impact.apps/web/ce/components/issues/header.tsx (2)
32-32: CommonProjectBreadcrumbs import placement is consistentImporting
CommonProjectBreadcrumbsalongside other component imports keeps the grouping clear and aligns with the rest of the codebase.
64-76: Issues header breadcrumb integration is soundInjecting
CommonProjectBreadcrumbsbefore the "Work Items" item correctly adds the project-level crumb without altering existing URLs or loading behavior (isLoading={loader === "init-loader"}). GivenuseParamsis cast to non-null strings, there’s no risk of empty IDs leaking into the breadcrumb routes here.apps/web/ce/components/projects/settings/intake/header.tsx (2)
17-18: New plane-web import is aligned with alias usageUsing the
@/plane-webalias forCommonProjectBreadcrumbsis consistent with how CE components are resolved in this repo.
42-55: Intake header now correctly shows project breadcrumbAdding
CommonProjectBreadcrumbsas the first child ofBreadcrumbsgives you the missing project crumb for the intake view while leaving the "Intake" item and its href untouched. Loading is already handled viaisLoading={currentProjectDetailsLoader === "init-loader"}, so there’s no additional risk of rendering partial breadcrumbs.apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx (2)
16-17: Importing CommonProjectBreadcrumbs here is appropriatePlacing the import under a short
// plane web importssection keeps concerns separated and reflects its cross-cutting nature.
38-56: Work item header breadcrumbs are now complete and safeUsing
CommonProjectBreadcrumbsinsideBreadcrumbsand guarding withif (!workspaceSlug || !projectId || !issueId) return null;ensures the project crumb is shown only when all routing context is available, avoiding invalid URLs in loading/error states.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx (2)
44-45: Plane-web import fits existing structureAdding
CommonProjectBreadcrumbsunder a clear comment section keeps imports organized and follows the same pattern as other headers.
137-167: Cycle detail breadcrumbs correctly include project levelThe insertion of
CommonProjectBreadcrumbsahead of the "Cycles" item creates a consistent project → collection → item trail. SinceworkspaceSlugandprojectIdare strongly typed fromuseParams, there’s no risk of empty IDs being passed into the common breadcrumbs here.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx (2)
18-19: Module header now depends on shared breadcrumbs as intendedThe
CommonProjectBreadcrumbsimport via@/plane-webmatches other CE usages and keeps project navigation centralized.
43-56: Modules list breadcrumb trail is consistent and safePlacing
CommonProjectBreadcrumbsbefore the "Modules" link aligns this header with the rest of the project-level headers and avoids duplicating project breadcrumb logic. With typed params fromuseParams, ID values are valid when passed down.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx (1)
15-16: Archives header now correctly pulls in shared project breadcrumbsUsing
CommonProjectBreadcrumbshere standardizes project-level navigation across archives and other detail views without altering archive-specific logic.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx (2)
32-33: Importing CommonProjectBreadcrumbs for views is consistentThe new import under a dedicated comment block mirrors other headers and keeps the dependency on the shared breadcrumb logic explicit.
120-149: View detail breadcrumbs now include project contextAdding
CommonProjectBreadcrumbsbefore the "Views" item correctly prepends the project crumb without touching the existing switcher-based view breadcrumb. With the existingif (!viewDetails) return;guard, you avoid rendering incomplete breadcrumbs in loading/error cases.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (1)
43-44: CommonProjectBreadcrumbs integration in module detail header looks correctImporting and rendering
CommonProjectBreadcrumbsahead of the "Modules" item keeps the trail consistent and leverages the shared preferences-based behavior without introducing empty-ID edge cases here. The use ofworkspaceSlugandprojectIdfromuseParams()is appropriate for this header.Also applies to: 131-131
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx (1)
18-19: Shared project breadcrumb usage in pages list header is wired up correctlyPulling
projectIdfromuseParams()and feeding it intoCommonProjectBreadcrumbsbefore the "Pages" item cleanly adds the project-level crumb while keeping the rest of the header behavior unchanged. No empty or placeholder IDs are introduced here.Also applies to: 27-27, 73-73
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (1)
3-3: Page details header breadcrumb extension is consistent and safeThe new
CommonProjectBreadcrumbsimport and its placement as the first item in theBreadcrumbschain correctly add the shared project breadcrumb before the "Pages" and page switcher items, matching the pattern used elsewhere without introducing new edge cases.Also applies to: 8-8, 16-17, 65-65
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx (1)
17-18: Cycles list header now correctly includes the shared project breadcrumbAdding
CommonProjectBreadcrumbsahead of the "Cycles" item and sourcingworkspaceSlug/projectIdfromuseParams()gives this header the same project-level breadcrumb behavior as other views, without relying on empty-string IDs or extra loading guards in the caller.Also applies to: 23-23, 40-40
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx (1)
14-15: Views list header breadcrumb update follows the shared pattern correctlyThe
CommonProjectBreadcrumbsimport and its use before the "Views" item, backed by typeduseParams(), integrates the project breadcrumb cleanly into this header and keeps URL construction consistent with other sections.Also applies to: 28-28
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/ce/components/issues/header.tsx (1)
66-66: LGTM! Integration follows the established pattern.The CommonProjectBreadcrumbs component is correctly integrated. Based on the learnings, the component should handle loading states internally, so no additional checks are needed here.
The
.toString()calls are redundant sinceworkspaceSlugandprojectIdare already typed as strings fromuseParams()at line 38. You can simplify to:- <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} /> + <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug} projectId={projectId} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx(2 hunks)apps/web/ce/components/issues/header.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/ce/components/issues/header.tsx
🧠 Learnings (4)
📚 Learning: 2025-06-18T09:46:08.566Z
Learnt from: prateekshourya29
Repo: makeplane/plane PR: 7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Applied to files:
apps/web/ce/components/issues/header.tsx
📚 Learning: 2025-05-14T13:16:23.323Z
Learnt from: vamsikrishnamathala
Repo: makeplane/plane PR: 7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
Applied to files:
apps/web/ce/components/issues/header.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/web/ce/components/issues/header.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/ce/components/issues/header.tsx
🧬 Code graph analysis (1)
apps/web/ce/components/issues/header.tsx (2)
apps/web/ce/components/breadcrumbs/common.tsx (1)
CommonProjectBreadcrumbs(10-17)apps/space/core/store/publish/publish.store.ts (1)
workspaceSlug(93-95)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/web/ce/components/issues/header.tsx (1)
32-33: LGTM! Import follows the recommended pattern.The aliased import path is consistent with the codebase convention and aligns with the guidance from previous reviews.
Description
This PR fixes the bug where project breadcrumb is not visible in the accordion layout.
Type of Change
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.